<template>
  <el-dialog
    title="人脸数据"
    :visible.sync="dialogVisible"
    width="900px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-scrollbar class="face-list-scrollbar">
      <div v-loading="loading" class="face-list">
        <el-row v-if="faceList.length > 0">
          <el-col v-for="face in faceList" :key="face.id" :span="4">
            <el-image :src="face.attach_url" fit="cover" class="face-image" :preview-src-list="srcList" />
            <p>{{ face.create_time }}</p>
          </el-col>
        </el-row>
        <el-empty v-else description="暂无人脸数据" />
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 用户
    userId: {
      type: Number,
      required: true
    },
    // 场景标识
    sceneKey: {
      type: String,
      required: true
    },
    // 场景ID值
    sceneId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      loading: true,
      dialogVisible: true,
      faceList: []
    }
  },
  computed: {
    srcList() {
      return this.faceList.map((item) => item.attach_url)
    }
  },
  created() {
    this.$http.get('/user/admin/face/list', {
      user_id: this.userId,
      scene_key: this.sceneKey,
      scene_id: this.sceneId
    }, ({ data }) => {
      this.faceList = data
      this.loading = false
    }, _ => {
    }, false)
  },
  methods: {
    handleClose() {
      this.$emit('close', true);
    }
  }
}
</script>

<style scoped lang="scss">
.face-list-scrollbar {
  height: 100%;

  .face-list {
    height: 510px;

    .face-image {
      height: 120px;
      width: 120px;
      overflow: hidden;
    }
  }
}
</style>
